import yayJpg from '../assets/yay.jpg';
import Box from './interOb/components/box';

import { useState } from 'react';

export default function HomePage() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    // 多次调用 setState dom 显示的都是 一个值
    // setCount(count + 1);
    // setCount(count + 1);
    // setCount(count + 1);
    console.log(count); // 0
    // 传入函数确保 每个 set 更新都执行， 一次点击 count 累计 正常计数
    setCount((count) => count + 1);
    setCount((count) => count + 1);
    setCount((count) => count + 1);
    console.log(count, 'setCount 后'); // 0
  }
  return (
    <div>
      <h2>Yay! Welcome to umi!</h2>
      <p>
        <img src={yayJpg} width="388" />
      </p>
      <p>
        每次点击都进行了3 次 setCount 很明显 useState 更新是异步的且 值相同时只响应一次.
        可以使用函数的方式 确保每次都执行
      </p>
      <div>
        <button onClick={handleClick}>count is: {count}</button> <br />
        <span>{count}</span>
      </div>
      <Box/>
    </div>
  );
}
